@use "ag";

@mixin output {
    .ag-filter-toolpanel-header {
        height: calc(var(--ag-grid-size) * 6);
    }

    .ag-filter-toolpanel-header,
    .ag-filter-toolpanel-search {
        padding: 0 var(--ag-grid-size);
    }

    @include ag.keyboard-focus((ag-filter-toolpanel-header), 4px);

    .ag-filter-toolpanel-group.ag-has-filter > .ag-group-title-bar .ag-group-title::after {
        @include ag.icon();
        @include ag.unthemed-rtl(( padding-left: var(--ag-grid-size) ));
        content: ag.icon-content(filter);
        position: absolute;
    }

    .ag-filter-toolpanel-group-level-0-header {
        height: calc(var(--ag-grid-size) * 8);
    }

    .ag-filter-toolpanel-group-item {
        margin-top: calc(var(--ag-grid-size) * 0.5);
        margin-bottom: calc(var(--ag-grid-size) * 0.5);
    }

    .ag-filter-toolpanel-search {
        height: var(--ag-header-height);
    }

    .ag-filter-toolpanel-search-input {
        flex-grow: 1;
        height: calc(var(--ag-grid-size) * 4);
        @include ag.unthemed-rtl(( margin-right: var(--ag-grid-size) ));
    }

    .ag-filter-toolpanel-group-level-0 {
        border-top: var(--ag-borders-secondary) var(--ag-secondary-border-color);
    }

    .ag-filter-toolpanel-expand,
    .ag-filter-toolpanel-group-title-bar-icon {
        @include ag.unthemed-rtl(( margin-right: var(--ag-grid-size) ));
    }

    @for $i from 1 through 10 {
        .ag-filter-toolpanel-group-level-#{$i} {
            .ag-filter-toolpanel-group-level-#{$i}-header {
                &.ag-filter-toolpanel-group-title-bar {
                    background-color: transparent;
                }
            }
            .ag-filter-toolpanel-group-level-#{$i + 1}-header {
                @include ag.unthemed-rtl((
                    padding-left: calc(var(--ag-filter-tool-panel-group-indent) * #{$i} + var(--ag-grid-size))
                ));
            }
        }
    }

    .ag-filter-toolpanel-instance-header.ag-filter-toolpanel-group-level-1-header {
        padding-left: var(--ag-grid-size);
    }

    .ag-filter-toolpanel-instance-filter {
        border-bottom: var(--ag-borders) var(--ag-border-color);
        border-top: var(--ag-borders) var(--ag-border-color);
        margin-top: var(--ag-grid-size);
    }

    .ag-filter-toolpanel-instance-header-icon {
        @include ag.unthemed-rtl((margin-left: var(--ag-grid-size)));
    }

    .ag-set-filter-group-icons {
        color: var(--ag-secondary-foreground-color);
    }
}